<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/public.css">
  <link rel="stylesheet" href="../css/details.css">
  <script src="../js/vue.js"></script>
  <script src="../js/axios.js"></script>
  <script src="../js/jquery-1.10.1.min.js"></script>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .box {
    width: 80%;
    margin: 10px auto;
  }

  .box .left {
    float: left;
    width: 400px;
    height: 600px;
    position: relative;
  }

  .box .left .top {
    width: 400px;
    height: 400px;
    position: relative;
  }

  .box .left .top .smallimg {
    width: 400px;
    height: 400px;
  }

  .box .left .top .shadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(97, 94, 94, 0.5);
  }

  #big {
    position: absolute;
    left: 500px;
    top: 0;
    height: 100px;
    width: 100px;
    overflow: hidden;
    border-radius: 50%;
  }

  #bigimg {
    width: 800px;
    height: 800px;
    position: absolute;
    left: 0;
    top: 0;
  }

  .bottom {
    width: 400px;
    height: 150px;
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .bottom .item {
    flex: 1;
  }

  .pro-infos {

    margin-left: 20px;
    float: left;

  }

  .color-list li {
    float: left;
    padding: 10px;
  }
</style>

<body>
  <header class="header"></header>


  <div class="content">

    <div class="box" id="box">
      <div class="left" id="left">
        <div class="top" id="top" @mousemove="move" @mouseover="over" @mouseout="out">
          <img :src="img" class="smallimg" />
          <div class="shadow" id="shadow" :style="shadowStyle" v-show="flag"></div>

          <div id="big" v-show="flag" :style="bigStyle">
            <img :src="bigimg" id="bigimg" :style="bigimgStyle" />
          </div>
        </div>

        <div class="bottom" v-if="goodsinfo.goodsimglist">
          <div class="item" v-for="item in goodsinfo.goodsimglist.split('|')" @mouseover="menuover(item)">
            <img :src="item">
          </div>
        </div>

      </div>

      <div class="pro-infos fl">
        <div class="pro-infos-t">
          <h3 class="gooda-name"></h3>
          <p class="goods-sn">{{goodsinfo.goodsname}}</p>
          <p class="goods-price">￥{{goodsinfo.goodsprice}}</p>
          <div class="promos">
            <div class="promos-title fl">促销</div>
            <div class="promos-content">
              <a href="" title="【免运费】会员专享">【免运费】会员专享</a>
            </div>
          </div>
        </div>
        <div class="pro-infos-b">
          <p class="goods-color">颜色: <span>深黑</span></p>
          <ul class="color-list" v-if="goodsinfo.goodsimglist">
            <li class="color-code" v-for="item in goodsinfo.goodsimglist.split('|')" @mouseover="menuover(item)">
              <img class="loading" :src="item" alt="">
            </li>
          </ul>
          <p class="goods-size">尺码: <span>XS</span></p>
          <ul class="size-list">
            <li class="size-code">
              <span title="XS">XS</span>
            </li>
          </ul>
          <div class="infos-panel">
            <div class="infos-cell">
              <div class="box-label fl">购买数量</div>
              <div class="pro-num-edit fr">
                <a href="javascript:;" class="num-ops num-minus">-</a>
                <input class="num-input" type="number" v-model="buynum">
                <a href="javascript:;" class="num-ops num-plus">+</a>
              </div>
            </div>
          </div>
          <div class="goods-btns">
            <a href="javascript:;" class="btn-addCart fl" @click="gotoshoppingcar">加入购物车</a>
            <a href="javascript:;" class="btn-tobuy fr">立即购买</a>
          </div>
        </div>
      </div>
    </div>

  </div>


  </div>



  <footer class="footer"></footer>
</body>
<script>
  $(".header").load("header.html");
  $(".footer").load("footer.html");

  new Vue({
    el: ".content",
    data: {
      img: "https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg",
      bigimg: "https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg",
      flag: false,
      shadowStyle: "",
      bigimgStyle: "",
      bigStyle: "",
      goodsinfo: "",
      buynum: 1,
    },
    async created() {
      let str = window.location.search;
      if (str.indexOf("id") != -1) {
        id = str.split("=")[1];
        let { data: list } = await axios({
          method: "get",
          url: "http://localhost:2345/goods",
          params: {
            id
          }
        })
        console.log(list);
        if (list.length) {
          this.goodsinfo = list[0];
          console.log(this.goodsinfo);
          this.img = this.goodsinfo.goodsimg;
          this.bigimg = this.goodsinfo.goodsimg;
        }
      }
    },
    mounted() {
      this.leftDiv = document.getElementById("left");
      this.shadowDiv = document.getElementById("shadow");
      this.topDiv = document.getElementById("top");
      this.bigImg = document.getElementById("bigimg");
      this.bigDiv = document.getElementById("big")
      this.left = this.leftDiv.offsetLeft; //自身距离父元素box的(左边)距离
      this.shadowDivWidth = parseFloat(window.getComputedStyle(this.shadowDiv)["width"]);//获取left自身的宽度
      this.top = this.leftDiv.offsetTop + 100;// 自身距离offsetParent顶部的距离
      this.topWidth = this.topDiv.offsetWidth;// top自身的宽度
      this.bigImgWidth = parseFloat(window.getComputedStyle(this.bigImg)["width"]);//获取bigimg自身的宽度
      this.bigWidth = parseFloat(window.getComputedStyle(this.bigDiv)["width"])//获取big自身的宽度
    },
    methods: {
      async gotoshoppingcar() {
        let userinfo = window.localStorage.getItem("userinfo");
        console.log(userinfo);
        if (userinfo) {
          //用户编号
          userinfo = JSON.parse(userinfo)
          let userid = userinfo.id;
          let userphone = userinfo.phone;

          let goodsid = this.goodsinfo.id;
          let goodsname = this.goodsinfo.goodsname;
          let goodsimg = this.goodsinfo.goodsimg;
          let goodsprice = this.goodsinfo.goodsprice;
          buynum = this.buynum;

          let { data: list } = await axios({
            method: "get",
            url: "http://localhost:2345/shoppingcar",
            params: {
              userid,
              userphone,
              goodsid,
            }
          })
          if (list.length) {
            let existInfo = list[0];
            let id = existInfo.id;
            let { data } = await axios({
              method: "patch",
              url: "http://localhost:2345/shoppingcar/" + id,
              data: {
                buynum: existInfo.buynum * 1 + buynum,
              }
            })

          } else {
            let { data } = await axios({
              method: "post",
              url: "http://localhost:2345/shoppingcar",
              data: {
                userid,
                userphone,
                goodsid,
                goodsname,
                goodsimg,
                goodsprice,
                buynum,
              }
            })
          }

          if (confirm("加入成功 是否进入购物车")) {
            window.location.href = "../html/cart.html";
          } else {
            window.location.href = "../html/goods.html";
          }

        } else {
          window.localStorage.setItem("backurl", window.location.href)
          window.location.href = "../html/login.html";
        }



      },
      menuover(src) {
        this.img = src.replace("50x50", "400x400");
        this.bigimg = src.replace("50x50", "800x800");

      },
      over() {
        this.flag = true;
      },
      out() {
        this.flag = false;

      },
      move() {
        let clientX = window.event.clientX;
        let clientY = window.event.clientY;
        let x = clientX - this.left - this.shadowDivWidth / 2;
        let y = clientY - this.top - this.shadowDivWidth / 2;
        let max = this.topWidth - this.shadowDivWidth;
        if (x <= 0) {
          x = 0;
        }
        if (y <= 0) {
          y = 0;
        }
        if (x >= max) {
          x = max;
        }
        if (y >= max) {
          y = max;
        }

        // x:400 = ?:800
        let bigX = x * this.bigImgWidth / this.topWidth;
        let bigY = y * this.bigImgWidth / this.topWidth;

        let bigDivX = x - (this.bigWidth - this.shadowDivWidth) / 2;
        let bigDivY = y - (this.bigWidth - this.shadowDivWidth) / 2;


        this.shadowStyle = {
          left: x + "px",
          top: y + "px",
        }

        this.bigimgStyle = {
          left: -bigX + "px",
          top: -bigY + "px",
        }

        this.bigStyle = {
          left: bigDivX + "px",
          top: bigDivY + "px",
        }

      }
    }
  })


</script>

</html>